<template>
    <div class="home">
        <div>
            <input type="text" v-model="yonghuming"
                style="outline: none;border: 1px solid darkgray;width: 200px;height: 38px;font-size: 16px;border-right: none;">
            <button @click="search"
                style="width:80px;height: 40px;background-color: rgb(235, 218, 175);color: white;font-size: 16px;border: 1px solid darkgray;border-left: none;">搜索</button>
            <button @click="isshow = 1"
                style="width: 120px;height: 40px;background-color: rgb(235, 218, 175);color: white;font-size: 16px;float: right;">添加讲师</button>

            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>性别</th>
                        <th>生日</th>
                        <th>手机号</th>
                        <th>讲师类型</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.nick }}</td>
                        <td v-text="item.sex == 1 ? '女' : item.sex == 0 ? '男' : '未知'"></td>
                        <td v-text="item.birthdata!= null ? item.birthdata : '未知'"></td>
                        <td>{{ item.iphone }}</td>
                        <td v-text="item.teachertype == 1 ? '讲师' : item.teachertype == 2 ? '班主任' : '未知'"></td>
                        <td>
                            <p @click="detail(item.id)">详情</p>
                            <p @click="del(item.id)">删除</p>
                            <p @click="revise(item.id)">修改</p>
                        </td>
                    </tr>

                </tbody>
            </table>
            <div class="block">
                <span class="demonstration">调整每页显示条数</span>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="currentPage" :page-sizes="[5, 6, 7, 8]" :page-size="pageSize"
                    layout="sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>

        <div v-show="isshow == 1">
            <h1>添加讲师</h1>
            <div>
                <span>&emsp;用户名：</span><input type="text" v-model="name">
            </div>
            <div>
                <span>&emsp;昵&emsp;称：</span><input type="text" v-model="nick">
            </div>
            <div>
                <span>&emsp;性&emsp;别：</span><input type="radio" name="sex" value="0" v-model="sex">
                <p>男</p><input type="radio" name="sex" value="1" v-model="sex">
                <p>女</p>
            </div>
            <div>
                <span>&emsp;生&emsp;日：</span><input type="date" v-model="birthdata">
            </div>
            <div>
                <span>&emsp;手机号：</span><input type="text" v-model="iphone">
            </div>
            <div>
                <span>讲师类型：</span><input type="radio" name="teachertype" value="1" v-model="teachertype">
                <p>讲师</p><input type="radio" name="teachertype" value="2" v-model="teachertype">
                <p>班主任</p>
            </div>
            <button @click="isshow = 0">取消</button><button @click="addTeacher">添加</button>
        </div>

        <div v-show="isshow == 2">
            <h1>修改讲师</h1>
            <div>
                <span>&emsp;用户名：</span><input type="text" v-model="name_revise">
            </div>
            <div>
                <span>&emsp;性&emsp;别：</span><input type="radio" name="sex_revise" value="0" v-model="sex_revise">
                <p>男</p><input type="radio" name="sex_revise" value="1" v-model="sex_revise">
                <p>女</p>
            </div>
            <div>
                <span>&emsp;生&emsp;日：</span><input type="date" v-model="birthdata_revise">
            </div>
            <button @click="isshow = 0">取消</button><button @click="addTeacher_revise">修改</button>

        </div>
    </div>
</template>

<script>
import { List, Add, Detail, Del, Search, Revise } from '../../utils/https.js'
export default {
    data() {
        return {
            //当前页数
            currentPage: 1,
            //每页显示条数
            pageSize: 5,
            //总条数
            total: 0,
            list: [],
            name: '',
            nick: '',
            sex: 0,
            birthdata: '',
            iphone: '',
            teachertype: 1,
            isshow: 0,
            yonghuming: '',
            name_revise: '',
            sex_revise: 0,
            birthdata_revise: '',
            id_revise: '',
            names: ''
        }
    },
    methods: {
        //获取列表分页
        getList() {
            List({
                page: this.currentPage,
                pagelimit: this.pageSize
            }).then(res => {
                console.log(res.data);
                //列表数据
                this.list = res.data.data
                //总条数
                this.total = res.data.pagecount

            })
        },
        //切换每页显示条数
        handleSizeChange(newSize) {
            this.pageSize = newSize
            this.getList()
        },
        //切换当前页
        handleCurrentChange(newPage) {
            this.currentPage = newPage
            this.getList()
        },
        //添加讲师
        addTeacher() {
            Add({
                name: this.name,
                nick: this.nick,
                sex: this.sex,
                birthdata: this.birthdata,
                iphone: this.iphone,
                teachertype: this.teachertype
            }).then(res => {
                console.log(res);
                this.getList()
                this.isshow = 0
            })

        },
        //讲师详情
        detail(id) {
            Detail({
                id: id
            }).then(res => {
                //成功后跳转详情页面并把详情信息传过去
                console.log(res.data);
                this.$router.push({
                    path: '/about/detail',
                    query: {
                        item: res.data
                    }
                })
            })
        },
        //删除讲师
        del(id) {
            Del({
                id: id
            }).then(res => {
                console.log(res);
                this.getList()
            })
        },
        //根据输入的用户名搜索
        search() {
            Search({
                name: this.yonghuming
            }).then(res => {
                console.log(res.data);
                this.list = res.data.data
                this.total = res.data.pagecount
            })
        },
        //显现修改讲师信息框然后传id
        revise(id) {
            this.isshow = 2
            console.log(id);
            this.id_revise = id
        },
        //修改讲师信息
        addTeacher_revise() {
            Revise({
                id: this.id_revise,
                name: this.name_revise,
                sex: this.sex_revise,
                birthdata: this.birthdata_revise
            }).then(res => {
                console.log(res);
                this.getList()
                this.isshow = 0
            })
        }

    },
    components: {

    },
    created() {
        //获取用户名
        this.names = JSON.parse(localStorage.getItem('Account')).username
        //获取列表数据
        this.getList()
    },
    watch: {
        //搜索框内容变化时触发如果是空则显示所有数据
        'yonghuming': {
            immediate: true,
            handler(newVal) {
                if (newVal == '') {
                    this.getList()
                }
            }
        },
    }
}
</script>

<style less>
.home {
    >div:nth-of-type(1) {
        width: 85vw;
        height: 85vh;
        background-color: white;
        position: absolute;
        top: 12vh;
        left: 12vw;
        overflow: auto;

        table {
            width: 100%;

            >thead {
                background-color: rgb(235, 237, 244);
                height: 80px;
                width: 100%;
                line-height: 80px;
                font-size: 16px;


            }

            >tbody {
                font-size: 16px;
                text-align: center;

                >tr {
                    height: 120px;

                    >td {
                        >p {
                            cursor: pointer;
                            background-color: rgb(235, 218, 175);
                            padding: 5px 0px;
                            margin: 5px;
                            border-radius: 5px;
                        }
                    }
                }


            }
        }
    }

    >div:nth-of-type(2),
    >div:nth-of-type(3) {
        width: 300px;
        padding: 20px;
        background-color: white;
        position: fixed;
        top: 30vh;
        left: 40vw;
        z-index: 999;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);

        >h1 {
            font-size: 20px;
            margin-bottom: 20px;
        }

        >div {
            margin-bottom: 20px;

            >input[type="text"] {
                width: 200px;
                height: 15px;
                padding: 5px;
                outline: none;
                border: 1px solid darkgray;
            }

            >p {
                margin-right: 20px;
                display: inline-block;
                position: relative;
                bottom: 2px;
                margin-left: 3px;
            }

            >input[type='date'] {
                width: 200px;
                height: 15px;
                padding: 5px;
                outline: none;
                border: 1px solid darkgray;
            }
        }

        >button {
            width: 100px;
            height: 30px;
            background-color: rgb(235, 218, 175);
            border: none;
            border-radius: 5px;
            color: white;
            font-size: 16px;
            cursor: pointer;
            margin-left: 35px;
            margin-bottom: 20px;
        }

        >button:nth-of-type(1) {
            background-color: rgb(235, 235, 235);

        }
    }
}
</style>
